<template>
  <div class="autoEprogram">
      <Nav></Nav>
      <div class="writing_right">
          <div class="TitleList">
              <div class="autoEprogram_top">
                <div class="autoEprogram_title">🐶只需要两步轻松对接站点😄</div>
                <div class="autoEprogram_search">
                  <el-input placeholder="请输入您的网站地址自动做对接" v-enter-prevent="checkUrl" v-model="domain" @input="handleInput" prefix-icon="el-icon-position" class="input-with-select">
                    <el-button slot="append" @click="checkUrl">自动对接</el-button>
                  </el-input>
                </div>
              </div>
              <div class="autoEprogram_content">
                <div class="autoEprogram_content_title">🥰当前AIDOG平台支持以下CMS接口对接</div>
                <div class="siteprogram_content">
                    <router-link :to="'/writing/siteManagement/parameterSettings?id=' + info.id" class="siteprogram_content_list" v-for="(info, index) in infos" :key="index">
                        <div class="siteprogram_content_list_icon">
                            <div class="list_icon_dd"><img :src="info.logo_image" /></div>
                            <div class="list_icon_dt">开始创建</div>
                        </div>
                        <div class="siteprogram_content_list_title">{{info.name}}</div>
                    </router-link>
                </div>
              </div>
              <div class="autoEprogram_content">
                <div class="autoEprogram_content_title">🙋如果您的系统不在以上请联系客户协助您做API接口</div>
                <div class="siteprogram_content_not"><a href="https://work.weixin.qq.com/kfid/kfc93ed84ae79165746" target="_blank">立即联系客服</a>帮助我</div>
                <div style="display: flex;">
                  <div class="autoEprogram_content_btn"><i class="el-icon-discover"></i><a href="#/writing/siteManagement/parameterSettings?id=7">自定义站点API对接文档</a></div>
                </div>
              </div>
          </div>
      </div>

      <div class="autoEprogramWindonw" v-show="autoEprogramWindonw">
        <div class="autoEprogramWindonwContent">
          <div class="autoEprogramWindonwContent_progress" v-loading="loading"></div>
          <div class="autoEprogramWindonwContent_title">正在分析您的站点</div>
        </div>
      </div>

      <div class="autoEprogramWindonw" v-show="noMatchWindow">
        <div class="autoEprogramWindonwContent">
          <div class="autoEprogramWindonwContentClose"><i class="el-icon-close" @click="noMatchWindow=false"></i></div>
          <div class="autoEprogramWindonwContent_icon"><i class="el-icon-heavy-rain"></i></div>
          <div class="autoEprogramWindonwContent_title">😂未匹配到您站点的对接文件，您可以尝试手动对接✊</div>
          <div class="autoEprogramWindonwContent_btn">
            <el-button type="primary"><a href="#/writing/siteManagement/parameterSettings?id=7">手动对接</a></el-button>
            <el-button type="success"><a href="https://work.weixin.qq.com/kfid/kfc93ed84ae79165746" target="_blank">找客服协助</a></el-button>
          </div>
        </div>
      </div>
      

  </div>
</template>

<script>
  import Nav from "@c/common/nav/nav";

  export default {
      name: "siteprogram",
      data() {
          return {
              showLog: false,
              autoEprogramWindonw: false,
			  noMatchWindow:false,
              domain: '',
			  loading:true,
              infos: [

              ],
          };
      },
      components: {
          Nav
      },
	  directives: {
        'enter-prevent': {
          inserted: function (el, binding) {
            el.addEventListener('keydown', function (event) {
              if (event.keyCode === 13 && !event.shiftKey) {
                event.preventDefault();
                event.stopPropagation();
                // 执行绑定的函数
                binding.value();
              }
            });
          }
        }
      },	  
      methods:{

		  checkUrl(){
			  if(!this.domain){
				  this.$message.error('请输入域名！');
				  return;
			  }
				this.autoEprogramWindonw=true
				this.axios.get('/api/site_match/checkWeburl',{
					params: {
						domain: this.domain,
						member_id:localStorage.getItem('memberInfo') ? JSON.parse(localStorage.getItem('memberInfo'))['id']:0,
					}
				}).then(res => {
					//匹配到了
					if(res.code === 1) {
						  this.$router.push({ path: '/writing/siteManagement/autoSetting', query:{
							  site_id:res.result.site_id,
							  https:res.result.https,
							  keywords:res.result.keywords,
							  title:res.result.title,
							  domain:this.domain,
							}});					
					}else if(res.result=="notmatch"){
						//未匹配到
						this.noMatchWindow=true
						this.autoEprogramWindonw=false
					}else{
						this.autoEprogramWindonw=false
					}
					
				})
		  },		  
		  //
          handleInput(value) {
            // 判断输入框的值是否包含http、https或/字符
            if (value.indexOf('http') !== -1 || value.indexOf('https') !== -1 || value.indexOf('/') !== -1) {
              // 使用replace方法将这些字符串替换为空字符串
              value = value.replace(/http[s]?:\/\//i, '').replace(/\//g, '');
            }
            // 更新info.website变量的值
            this.domain = value;
          },
          getList(){
            let that = this;
            that.axios.get('/api/site/listDemo').then(res => {
              if(res.code === 1) {
                that.infos = res.result

              }
            })
          }
      },
      mounted() {
          this.getList()
      },
  }
</script>

<style>
@import "autoEprogram.css";
</style>
